import tool from './Tool';
import zrender from 'zrender';

/**
 * @desc node class
 */
export default class Node {
    /**
     *
     * @param {object} node node data
     * @param {tempLineZrGroup} tempLineZrGroup store changging path
     * @param {updatePath} updatePath updata path callback
     */
    constructor(node, tempLineZrGroup, updatePath, addPath, onNodeContextMenu, dragZrGroup) {
        this.node = node;
        this.updatePath = updatePath;
        this.addPath = addPath;
        this.onNodeContextMenu = onNodeContextMenu;
        this.tempLineZrGroup = tempLineZrGroup; // store changging path
        this.dragZrGroup = dragZrGroup;
        this.scale = dragZrGroup.scale;
    }

    getData() {
        return this.node;
    }

    /**
     * @desc drag cricle will build a new changging Path
     * @param {event} e event object
     * @param {zrender.Circle} circle
     */
    dragTempLine(e, circle) {
        e.cancelBubble = true;
        const [ox, oy] = this.dragZrGroup.position;
        const start = [circle.shape.cx + circle.data.x + ox, circle.shape.cy + circle.data.y + oy];
        const path = new zrender.Polyline({
            z: 5,
            data: this.node,
            shape: { points: [start] }
        });
        this.tempLineZrGroup.add(path);
        // move path
        const moveFun = em => {
            const path = this.tempLineZrGroup.children()[0];
            let points = [start, [em.zrX, em.zrY]];
            path.shape.points = points;
            path.dirty();
        };
        const upFun = () => {
            // document.removeEventListener('mousemove', moveFun);
            document.removeEventListener('mouseup', upFun);
            window.BBD_TOP_GLOBAL_START = undefined;
            this.tempLineZrGroup.removeAll();
            this.tempLineZrGroup.dirty();
        };
        // document.addEventListener('mousemove', moveFun);
        document.addEventListener('mouseup', upFun);
    }

    getNode() {
        const { x, y, width, height, fill = 'transparent', opacity = 1 } = this.node;

        // node composed of others zrender
        const group = new zrender.Group();
        group.position = [x, y];
        group.data = this.node;
        const node = new zrender.Rect({
            // z: 200,
            z: 5, // z-index
            cursor: 'default',
            data: this.node,
            shape: { width, height },
            style: { fill, opacity }
        });

        // const node2 = new zrender.Rect({
        //     z: 100,
        //     cursor: 'move',
        //     position: [-30, -30],
        //     data: this.node,
        //     shape: { width: width + 60, height: height + 60 },
        //     style: { fill, opacity: 0.2 }
        // });
        // group.add(node2);
        group.add(node);

        // out of node, circle
        const points = [
            { dirc: 'left', cx: 0, cy: height / 2 },
            { dirc: 'right', cx: width, cy: height / 2 },
            { dirc: 'top', cx: width / 2, cy: 0 },
            { dirc: 'bottom', cx: width / 2, cy: height }
        ];
        this.node.points = points;
        this.node.group = group;
        points.forEach(p => {
            const { cx, cy } = p;
            const r = 1; // 连线点的直径
            const circle = new zrender.Circle({
                z: 7,
                data: this.node,
                shape: { cx, cy, r, dirc: p.dirc },
                style: { fill: '#eee', opacity: 0.1 }
            });
            circle.on('mousedown', e => {
                window.BBD_TOP_GLOBAL_START = e.target;
                this.dragTempLine(e, circle);
            });
            circle.on('mouseup', e => {
                e.cancelBubble = true;
                if (circle.id === window.BBD_TOP_GLOBAL_START.id) {
                    return;
                }
                this.addPath({ start: window.BBD_TOP_GLOBAL_START, end: e.target });
                window.BBD_TOP_GLOBAL_START = undefined;
            });
            group.add(circle);
        });

        // drag node group
        // group.on('mousedown', e => {
        //     tool.dragGroup(
        //         e,
        //         group,
        //         () => {
        //             this.updatePath(this.node.id);
        //         },
        //         this.scale
        //     );
        // });

        group.on('contextmenu', this.onNodeContextMenu);
        return group;
    }
}
